<template>
	<view class="detail">
		<navBar title="-BLOG-" :home="true"></navBar>		
		<view class="img">
			<image :src="this.list.cover" mode="widthFix"></image>
			<view class="imgTxt">
				<view class="title">{{this.list.title}}</view>
				<view class="txt">
					<view class="cover">
						<image :src="this.list.userAvatar"></image>
					</view>
					<text class="sth">{{this.list.userName}}</text>
					<text class="sth">阅读量{{this.list.read_count}}</text>
				</view>
			</view>
		</view>
		<view class="detailTxt">
			<!-- 在此节点使用html形式渲染 -->
			<view v-html="this.list.content"></view>
		</view>
		<!-- 评论 -->
		<view class="comment">
			<text class="commentTitle">最新评价({{this.list.comment_count}})</text>
			<view class="commentBox" v-for="item in commentList" :key="item.id">
				<view class="commentImg">
					<image :src="item.userAvatar"></image>
				</view>
				<view class="txt">
					<view class="commentName">{{item.userName}}</view>
					<view class="commentTxt">{{item.content}}</view>
				</view>
					<text class="time">{{getDateDiff(item.createdAt)}}</text>
					<!-- {{item.createdAt.slice(0, 10)}} -->
			</view>
		</view>
		<!-- 底部 -->
		<view class="footer">
			<view class="ipt">
				<u--input
					placeholder="说点什么~"
					v-model="comment.content"
					shape="circle"
					@confirm="confirm"
				></u--input>
			</view>	
			  <view class="box">
					<view class="boxTxt" @click="like"><u-icon :name="flag?'thumb-up':'thumb-up-fill' " :color="flag?'':'#fe630a'" size="20px"></u-icon>赞</view>
					<view class="boxTxt" @click="follow"><u-icon :name="count?'star':'star-fill' " :color="count?'':'#fe630a'" size="20px"></u-icon>关注作者</view>
					<view class="boxTxt"><u-icon name="chat" size="20px"></u-icon>评论</view>
			  </view>
		</view>
		<!-- login -->
		<view class="loginBox" v-show="show">
			<login class="login"></login>
		</view>
	</view>
</template>

<script>
	import{ getDetail,creatComment,getComment,likeBlog,followBlog,getFollow,getLike}from  '@/config/api.js'
	import {mapState} from 'vuex'
	
	export   default {
		data() {
			return {
				comment:{
					content:"",
					blogId:""
				},
				// 当前博客数据
				list:[],
				// 当前博客评论列表
				commentList:[],
				flag:true,
				count:true,
				// 博客详情ID
				blogId:'',
				show: false
			};
		},
		async onLoad(option){
			try{
			this.blogId=option.id
			// 获取博客详情
			const detail=await getDetail(this.blogId,this.userInfo.token)
			this.list=detail.data
			// console.log(this.list);
			
			this.comment.blogId=this.list.id
			
			// 获取博客评论
			const msg=await getComment(this.comment.blogId,this.userInfo.token)
			this.commentList=msg.data.rows
			// console.log(this.commentList);		
			
			// 获取用户点赞
			const belike =await getLike(this.userInfo.token)
			
			belike.data.rows.forEach((ele)=>{
				if(ele.blogId===this.list.id){
					this.flag=false
				}
			})
			
			// 获取用户关注
			const befollow =await getFollow(this.userInfo.token)
			console.log(befollow);
	
			befollow.data.rows.forEach((ele)=>{
				if(ele.beFollowUserId===this.list.userId){
					this.count=false
				}
			})
			}catch(error){
				this.show=true
			}
		},
		methods:{
			async confirm(value){
				const ipt=await creatComment(this.comment,this.userInfo.token)
				// 获取博客评论
				const msg=await getComment(this.comment.blogId,this.userInfo.token)
				this.commentList=msg.data.rows
				// 获取博客详情
				const detail=await getDetail(this.blogId,this.userInfo.token)
				this.list=detail.data
				
				// 清空
				this.comment.content=null
			},
			async like(){				
				this.flag=!this.flag
				const Like=await likeBlog(this.list.id,this.userInfo.token)
				console.log(Like);
			},
			async follow(){		
				this.count=!this.count
				const Follow=await followBlog(this.list.userId,this.userInfo.token)
				console.log(Follow);
			},
						// 发布评论与现在间隔
						getDateDiff(post_modified) {
							// 拿到当前时间戳和发布时的时间戳，然后得出时间戳差
							var curTime = new Date();
							var postTime = new Date(post_modified);
			
							//部分浏览器不兼容此转换建议所以对此进行补充（指定调用自己定义的函数进行生成发布时间的时间戳）
							var timeDiff = curTime.getTime() - postTime.getTime();
							//上面一行代码可以换成以下（兼容性的解决）
							// var timeDiff = curTime.getTime() - getTs(post_modified);
			
							// 单位换算
							var min = 60 * 1000;
							var hour = min * 60;
							var day = hour * 24;
							var week = day * 7;
							var month = week * 4;
							var year = month * 12;
			
							// 计算发布时间距离当前时间的周、天、时、分
							var exceedyear = Math.floor(timeDiff / year);
							var exceedmonth = Math.floor(timeDiff / month);
							var exceedWeek = Math.floor(timeDiff / week);
							var exceedDay = Math.floor(timeDiff / day);
							var exceedHour = Math.floor(timeDiff / hour);
							var exceedMin = Math.floor(timeDiff / min);
							// 最后判断时间差到底是属于哪个区间，然后return
			
							if (exceedyear < 100 && exceedyear > 0) {
								return '发表于' + exceedyear + '年前';
							} else {
								if (exceedmonth < 12 && exceedmonth > 0) {
									return exceedmonth + '月前';
								} else {
									if (exceedWeek < 4 && exceedWeek > 0) {
										return exceedWeek + '星期前';
									} else {
										if (exceedDay < 7 && exceedDay > 0) {
											return exceedDay + '天前';
										} else {
											if (exceedHour < 24 && exceedHour > 0) {
												return exceedHour + '小时前';
											} else {
												if (exceedMin == 0) {
													return '刚刚发表';
												} else {
													return exceedMin + '分钟前';
												}
			
											}
										}
									}
								}
							}
						},
		},
		computed:{
			...mapState(['userInfo'])
		}
	}
</script>

<style lang="scss">
	.loginBox {
		z-index: 999;
		width: 100vw;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.4);
		position: fixed;
		top: 11.8652vw;
		left: 0;
		.login {
			position: absolute;
			top: 40%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
		::v-deep .u-input{
			background-color: #ffffff;
		}
	}
::v-deep .u-input{
	background-color: #eee;
}
.detail{
		width: 100vw;
		box-sizing: border-box;
		padding: 2vw;
		padding-bottom: 15vw;
	.img{
		// height: 30vh;
		width:100%;
		border-radius: 3vw;
		position: relative;
		overflow: hidden;
		image{
			width: 100%;
			height: 100%;
		}
	.imgTxt{
		box-sizing: border-box;
		padding: 2vw 3vw;
		position: absolute;
		bottom: 0;
		height:10vh;
		width: 100%;
		background-color: rgba(0, 0, 0, 0.3);
		}	
		.title{
			margin-bottom: 1.31vw;
			font-size: 5.5vw;
			color: #fff;
			font-weight: 600;
		}
		.txt{
			height: 4vw;
			font-size: 4vw;
			color: #fff;
			width: 100%;
			display: flex;
		.sth{
				margin-left:2vw;
				height: 100%;
				line-height:4vw;
			}
		.cover{
			height: 4.8vw;
			width: 4.8vw;
			background-color: #ffff7f;
			border-radius: 50%;
			overflow: hidden;
			image{
				width: 100%;
				height: 100%;
				}
			}
		}
	}	
	.detailTxt{
		width: 100%;
		// height:29vh;
		// 给定高度，文本超出产生滚动条
		// overflow: auto;
		box-sizing: border-box;
		padding: 2vw;
		
		::v-deep img {
			width: 100%;
		}
	}
		
	.comment{
		box-sizing: border-box;
		padding: 2vw;
		margin-top: 20vw;
		width: 100%;
		border-top: #eee 2px solid;
	.commentTitle{
			font-size: 18px;
			font-weight:600
	}
	.commentBox{		
		margin-top: 4vw;
		display: flex;
		align-items: center;
		border-bottom: #f0f0f0 1.5px solid;
		position: relative;
		padding: 1vw 0;
		.commentImg{
			height: 12vw;
			width: 12vw;
			background-color: #ffff7f;
			border-radius: 50%;
			overflow: hidden;
			image{
				width: 100%;
				height: 100%;
				}
			}
		.txt{
			margin-left: 3.5vw;
			height: 100%;
			// background-color: #ffee2e;
		.commentName{
			font-size: 16px;
		}
		.commentTxt{
			font-size: 15px;
			color: #818181;
			}
		}		
		.time{
			position: absolute;
			font-size: 14px;
			color: #c7c7c7;
			right: 0;
			top: 0
		}
	}
}	
.footer{
		height: 15vw;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		bottom: 0;
		.ipt{
			width: 45%;
		}
		.box{
			width: 50%;
			height: 65%;
			display: flex;
			.boxTxt{
				height:  10vw;
				line-height: 10vw;
				display: flex;
				font-size: 14px;
				margin-right: 2vw;
			}
		}
	}
}
</style>
